<template>
	<Input type='search' p='请输入部门名称' v-model:value='searchValue' />
	<Tree
		@select 				= 'onSelect'
		:tree-data 				= 'ajax.data'
		:replaceFields 			= '{ key:idStr, title:nameStr }'
		v-model:expandedKeys 	= 'expandedKeys'
		:auto-expand-parent 	= 'autoExpandParent'
		@expand 	 			= 'onExpand'
	>
		<template #title='d'>
			<span v-if='d[nameStr] && d[nameStr].indexOf(searchValue) > -1'>
				{{ d[nameStr].substr(0, d[nameStr].indexOf(searchValue)) }}<span style='color: #f50'>{{ searchValue }}</span>{{ d[nameStr].substr(d[nameStr].indexOf(searchValue) + searchValue.length) }}
			</span>
			<span v-else>{{ d[nameStr] }}</span>
		</template>
	</Tree>
</template>

<script>
	import { ref, watch } from 'vue'
	import { Tree } from 'ant-design-vue'
	// app.use( Tree )
	/* --------------------------- 递归权组件 --------------------------- */
	const Input = $.lazy(()=>import('@antd/form/input.vue'))
	/* --------------------------- 查找 --------------------------- */
	// 查找
	const getParentKey = (key, tree, idStr) => {
		let parentKey
		for (let i = 0; i < tree.length; i++) {
			const node = tree[i]
			if (node.children) {
				if (node.children.some(item => +item[idStr] === +key )) {
					parentKey = node[idStr]
				} else if (getParentKey(key, node.children, idStr)) {
					parentKey = getParentKey(key, node.children, idStr)
				}
			}
		}
		return parentKey
	}
	/* --------------------------- Page --------------------------- */
	export default {
		components:{ Input, Tree },
		props:{
			value 		: [Number, String, Array],
			checkable	: { type:Boolean, default:false },
			data		: { type:Array, default: [] },
			api 		: String,
			idStr 		: { type: String, default: 'id' },
			nameStr 	: { type: String, default: 'title' },
			cache 		: Boolean,
			expand 		: { type:Boolean, default: true }
		},
		emits:{
			select:null
		},
		setup({ api, data, cache, idStr, nameStr, expand }, ctx){
			
			const ajax = ref({ data })
			
			const expandedKeys  = ref([])
			const searchValue = ref('')
			const autoExpandParent = ref()
			
			// 找到所有数据组件 [{ key:, title: },...]
			const dataList = [ ]
			const generateList = data => {
				const expendKeysAll = [ ]
				for (let i = 0; i < data.length; i++) {
					const node = data[i];
					dataList.push({ [idStr]:node[idStr], [nameStr]: node[nameStr] });
					expendKeysAll.push(node[idStr]) // 默认展开所有
					if (node.children) {
						generateList(node.children);
					}
				}
				expandedKeys.value = expendKeysAll
			}
			
			$fn.ajax({ ajax, data, api, cache, name, ctx }).then(data=>{
				if(expand){
					generateList(data)
				}
			})
			
			watch(searchValue, value => {
				const d = ajax.value.data
				const expanded = dataList.map(item => item[nameStr].indexOf(value) > -1 ? getParentKey(item[idStr], d, idStr) : null)
				.filter((item, i, self) => item && self.indexOf(item) === i)
				if(value){
					expandedKeys.value = expanded
					searchValue.value = value
					autoExpandParent.value = true
				}else{
					expandedKeys.value = []
					autoExpandParent.value = false
				}
			})
		
			return {
				ajax,
				expandedKeys,
				autoExpandParent,
				searchValue,
				onSelect: value => {
					ctx.emit('select', value[0])
				},
				onExpand: keys => {
					expandedKeys.value = keys
					autoExpandParent.value = false
				}
			}
		}
	}
</script>